import { Avatar, Icon, Menu, Spin } from 'antd';
import { ClickParam } from 'antd/es/menu';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';

import { ConnectProps, ConnectState } from '@/models/connect';
import { CurrentUser } from '@/models/user';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import { FormDataType } from '@/pages/user/login';

export interface GlobalHeaderRightProps extends ConnectProps {
  currentUser?: CurrentUser;
  menu?: boolean;
}

class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  handleLogout = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/logout',
      payload: {
        onSuccess: () => {
          dispatch({
            type: 'global/refreshState',
            payload: {
              userInfo: {},
            },
          });
        },
      },
    });
  };

  render(): React.ReactNode {
    const { currentUser = {}, menu } = this.props;

    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        <Menu.Item
          key="center"
          onClick={() => {
            router.push('/manage/person/baseinfo');
          }}
        >
          <Icon type="user" />
          <FormattedMessage id="menu.person.baseinfo" defaultMessage="基本信息修改" />
        </Menu.Item>
        <Menu.Item
          key="settings"
          onClick={() => {
            router.push('/manage/person/password');
          }}
        >
          <Icon type="setting" />
          <FormattedMessage id="menu.person.password" defaultMessage="密码修改" />
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout" onClick={this.handleLogout.bind(this)}>
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="退出登录" />
        </Menu.Item>
      </Menu>
    );

    return (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          {/*<Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />*/}
          <span className={styles.name}>{sessionStorage.getItem('userName')}</span>
        </span>
      </HeaderDropdown>
    );
  }
}
export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
